<!--
 * @FilePath: index.vue
 * @Author: 杜芬
 * @Date: 2022-08-03 14:30:29
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-10 09:23:19
 * Copyright: 2022 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: CarbonAccounting
-->
<template>
  <div class="carbon-accounting">
    <div class="head">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="统计方式">
          <el-radio-group v-model="radio" @change="radioChange">
            <el-radio :label="1">按年统计</el-radio>
            <el-radio :label="2">按月统计</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="截止日期" v-if="radio == 1">
          <el-date-picker
            v-model="year"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止日期" v-if="radio == 2">
          <el-date-picker
            v-model="month"
            type="month"
            value-format="yyyy-MM"
            format="yyyy-MM"
            :picker-options="pickerOptions"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="sumit" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主体 -->
    <div class="footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="text">能效建议方案实用化报表</span>
          <el-button style="float: right; padding: 3px 0" type="text">导出</el-button>
        </div>
        <div class="text item">
          <el-table :data="tableData" style="width: 100%" @row-click="singleElection">
            <el-table-column type="" label="" width="60">
              <template slot-scope="{ row }">
                <el-radio-group v-model="templateSelection">
                  <el-radio :label="row.id">&nbsp;</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="60"> </el-table-column>
            <el-table-column prop="date" label="日期"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
        <!-- operatePage -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
import * as dayjs from 'dayjs';
export default {
  name: 'CarbonAccounting',
  data() {
    return {
      date: '',
      name: '',
      templateSelection: '', // 单选框
      total: 0,
      pageSize: 10,
      currentPage4: 1,
      radio: 1,
      year: dayjs(new Date()).format('YYYY-MM-DD'), // 当前年
      month: dayjs(new Date()).format('YYYY-MM'), // 当前月
      age: '18',
      form: {
        name: '张三',
      },
      //大于当前日期不可选
      pickerOptions: {
        disabledDate: (time) => {
          var date = new Date();
          return date.getTime() < time.getTime;
        },
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          id: '1',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          id: '2',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          id: '4',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          id: '3',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    };
  },
  created() {
    console.log(dayjs(new Date()).format('YYYY-MM-DD'));
    console.log(dayjs(new Date()).format('YYYY-MM'));
    console.log(dayjs(new Date()).add(-1, 'year').format('YYYY')); // 当前年的上一年
    console.log(dayjs(new Date()).add(-1, 'month').format('YYYY-MM')); // 当前月的上一月
    console.log(dayjs(new Date()).add(-1, 'day').format('YYYY-MM-DD')); // 当前日的上一日
  },
  methods: {
    // 表格单选框
    singleElection(row) {
      this.templateSelection = this.tableData.indexOf(row); // 控制只能单选
      this.name = row.name; // 把数据缓存到data里
      this.date = row.date;
      console.log(this.name + '-' + this.date); // 点击哪行打印哪行的数据
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 查询
    sumit() {},
    // radio
    radioChange(val) {
      // console.log(val);
      this.radio = val;
      // console.log(this.radio);
    },
  },
};
</script>
<style lang="scss" scoped>
.carbon-accounting {
  min-width: 730px;
  width: 100%;
  min-height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  background-color: #eee;
  // border: 1px solid red;
  padding: 15px;
  .head {
    width: 100%;
    height: 60px;
    // border: 1px solid greenyellow;
  }
  .footer {
    width: 100%;
    min-height: calc(100vh - 143px);
    // border: 1px solid red;
    // .box-card {
    //   width: 100%;
    //   height: 100%;
    // }
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: '';
    }
    .clearfix:after {
      clear: both;
    }

    .box-card {
      width: 100%;
      height: 650px;
    }
  }
  .text {
    font-size: 18px;
    font-weight: 600;
  }
}
.el-pagination {
  // display: flex;
  // justify-content: center;
  // text-align: center;
}
</style>
